<template>
	<view class="topnav" :style="{ paddingTop: statusBarHeight + 'px' }">
		<view class="left" @tap="emit('menu')">
			<uni-icons type="bars" size="22" color="#fff" />
		</view>
		<scroll-view class="tabs" scroll-x enable-flex>
			<view v-for="(t, i) in tabs" :key="t" class="tab" :class="{ active: i === activeIndex }" @tap="onTab(i)">{{ t }}</view>
		</scroll-view>
		<view class="right">
			<uni-icons type="search" size="22" color="#fff" />
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
	modelValue: { type: Number, default: 5 },
	tabs: { type: Array, default: () => ['关注','成都','长视频','商城','热点','推荐'] }
})
const emit = defineEmits(['update:modelValue','change','menu'])
const activeIndex = ref(props.modelValue)
const statusBarHeight = ref(0)
onMounted(() => {
	// 适配状态栏高度，避免遮挡
	// #ifdef APP-PLUS || MP
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight || 0
	// #endif
})
function onTab(i){
	activeIndex.value = i
	emit('update:modelValue', i)
	emit('change', i)
}
</script>

<style lang="scss" scoped>
.topnav{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	display: flex;
	align-items: center;
	background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
	z-index: 900;
	padding: 0 24rpx;
}
.left,.right{ width: 60rpx; display:flex; align-items:center; justify-content:center; }
.tabs{ flex:1; white-space: nowrap; overflow:hidden; }
.tab{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #eee;
	font-size: 28rpx;
	padding: 0 18rpx;
	height: 60rpx;
}
.tab.active{ color: #fff; font-weight: 600; position: relative; }
.tab.active::after{
	content: '';
	position: absolute;
	left: 20rpx;
	right: 20rpx;
	bottom: 6rpx;
	height: 6rpx;
	background: #fff;
	border-radius: 6rpx;
}
</style>


